<template>
  <div class="wrap-page">
    <el-card :body-style="{ padding: '0px' }">
      <div class="login-container">
        <div class="item-left">
          <div class="info-title">我金天购物商城 - 商城管理系统</div>
          <div class="info-bottom">可视化数据，更高效的管理平台</div>
        </div>
        <div class="item-right">
          <h2 style="font-weight: 400">登录</h2>
          <el-form
            class="login-form"
            ref="formRef"
            :label-position="'top'"
            label-width="100px"
            :model="formData"
            :rules="formRules"
          >
            <el-form-item label="帐号" prop="username">
              <el-input
                :prefix-icon="User"
                v-model="formData.username"
                v-on:keyup.enter="handleClickSubmit(formRef)"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                :prefix-icon="Lock"
                v-model="formData.password"
                v-on:keyup.enter="handleClickSubmit(formRef)"
              ></el-input>
            </el-form-item>
            <el-form-item class="btn-box">
              <el-button
                type="primary"
                @click="handleClickSubmit(formRef)"
                :loading="isLoading"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <div class="footer-aderss">
      技术支持 © 成都明日东华网络科技有限公司
      <el-link type="info" href="http://cdmrdh.com">http://cdmrdh.com</el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import type { ElForm } from 'element-plus';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { ElNotification } from 'element-plus';

const authStore = useAuthStore();
const { requestLogin, requestProfile, requestRoutes } = authStore;

const router = useRouter();

// 加载状态
const isLoading = ref(false);

const formRef = ref<InstanceType<typeof ElForm>>();

const formData = reactive({
  username: '',
  password: ''
});

const formRules = reactive({
  username: [
    { type: 'string', required: true, message: '请输入帐号' },
    { max: 32, trigger: 'blur', message: '长度不能超过32位字符' }
  ],
  password: [
    { type: 'string', required: true, message: '请输入密码' },
    { max: 32, trigger: 'blur', message: '长度不能超过32位字符' }
  ]
});

// btn - submit
const handleClickSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) submitDatabase();
  });
};

const submitDatabase = async () => {
  isLoading.value = true;
  try {
    await requestLogin(formData);
    await requestProfile();
    await requestRoutes();
    ElNotification.closeAll();
    router.push('/');
  } catch (error: any) {
    isLoading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.wrap-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('@/assets/img/login-bg.jpg');

  .login-container {
    width: 800px;
    // height: 100%;
    display: flex;
    justify-content: space-between;

    .item-left {
      width: 50%;
      padding: 24px;
      color: rgba(255, 255, 255, 0.8);
      background-image: url('../assets/img/login-left.png');
      background-size: cover;
      position: relative;

      .info-title {
        // color: #fff;
        font-size: 24px;
        margin: 20px 0 0;
      }

      .info-bottom {
        // padding: inherit;
        margin: 0 24px;
        padding: 16px 0 24px;
        // color: #fff;
        border-top: 1px solid rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

    .item-right {
      width: 50%;
      padding: 24px;

      .login-form {
        margin-top: 72px;
        margin-bottom: 120px;
      }

      .btn-box {
        margin-top: 32px;
      }
      :deep(.el-input__icon) {
        height: inherit;
        color: var(--el-text-color-regular);
      }
      :deep(.el-form-item__content) {
        button {
          width: 100%;
        }
      }
    }
  }

  .footer-aderss {
    margin-top: 8px;
    font-size: 14px;
    color: var(--el-text-color-regular);
    .el-link {
      vertical-align: inherit;
    }
  }
}
</style>
